<template>
  <div class="card-tab-box">
    <PubTable
      :isTabInner="true"
      :tableData="crudData"
      :uploadUrl="uploadUrl"
      :hasSearch="false"
      @selected-items="getSelection"
    />
  </div>
  <public-dialog
    v-model="showDetailDialog"
    title="查看详情"
    :before-close="closeDetailDialog"
    :showCancelButton="false"
    :showConfirmButton="false"
    :width="600"
  >
    <div
      class="publicdetails-title"
      style="margin-bottom: 18px; font-weight: bold"
    >
      <span
        style="
          white-space: normal;
          width: 84px;
          margin-right: 24px;
          display: inline-block;
        "
      >
        变量名称
      </span>
      {{
        "超出长度就换行超出长度就换行"
      }}
    </div>
    <div class="publicdetails-module">
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">功能码</div>
          <div class="public-text-value public-left">
            {{
              "超出长度"
            }}
          </div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">起始地址</div>
          <div class="public-text-value public-left">
            {{ "超出长度就换行" }}
          </div>
        </div>
      </div>
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">数量</div>
          <div class="public-text-value public-left">
            {{ "超出长度就换行" }}
          </div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">符号类型</div>
          <div class="public-text-value public-left">
            {{
              "超出长度"
            }}
          </div>
        </div>
      </div>
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">字节序</div>
          <div class="public-text-value public-left">
            {{ "超出长度就换行" }}
          </div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">倍率</div>
          <div class="public-text-value public-left">
            {{
              "超出长度"
            }}
          </div>
        </div>
      </div>
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">偏移量</div>
          <div class="public-text-value public-left">
            {{ "超出长度就换行" }}
          </div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">小数位数</div>
          <div class="public-text-value public-left">
            {{
              "超出长度"
            }}
          </div>
        </div>
      </div>
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">单位</div>
          <div class="public-text-value public-left">
            {{ "超出长度就换行" }}
          </div>
        </div>
      </div>
    </div>
  </public-dialog>
</template>

<script lang="jsx" setup>
import "@/components/PubTable/style/pubTablecss.scss";
import {
  tableData as mockData,
  caserData,
} from "@/components/PubTable/utils/mockData.js";
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
let { proxy } = getCurrentInstance();
import { useRouter } from "vue-router";
const router = useRouter();
const isDetail = ref(false);
const showDetailDialog = ref(false);
const detailInfo = ref({});
const closeDetailDialog = function () {
  showDetailDialog.value = false;
};

//全局数据配置
const crudData = ref({
  clums: [
    // {
    // 	type: "selection",
    // 	minWidth: 40,
    // 	label: "复选框",
    // 	fixed: "left",
    // },
    {
      type: "index",
      props: "index",
      label: "序号",
      width: 80,
      fixed: "left",
    },
    {
      props: "value1",
      label: "变量名称",
      render: (scope) => {
        return (
          <>
            <el-link
              onClick={async () => {
                //todo showDetail
                detailInfo.value = scope.row;
                showDetailDialog.value = true;
              }}
            >
              {scope.row.value1}
            </el-link>
          </>
        );
      },
    },
    {
      props: "value2",
      label: "功能码",
    },
    {
      props: "value3",
      label: "起始地址",
    },
    {
      props: "value4",
      label: "数量",
    },
    {
      props: "value5",
      label: "单位",
    },
    {
      props: "caozuo",
      label: "操作",
      width: 150,
      fixed: "right",
      render: (scope) => {
        return (
          <>
            <span
              class="p-table-btn p-table-btn-b"
              onClick={async () => {
                crudData.value.form.formName = "编辑";

                crudData.value.form.formList = crudData.value.form.formList.map(
                  (item) => {
                    item.value = scope.row[item.key] || null;
                    return item;
                  }
                );

                crudData.value.form.formShow = true;
              }}
            >
              编辑
            </span>
            <span
              class="p-table-btn p-table-btn-r"
              onClick={() => {
                ElMessageBox.confirm(
                  "删除后系统无法恢复，确认删除吗?",
                  "信息提示",
                  {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    customClass: "public-message-box-default",
                  }
                ).then(() => {
                  //删除逻辑
                });
              }}
            >
              删除
            </span>
          </>
        );
      },
    },
  ],
  handleBtns: [
    {
      text: "添加",
      onClick: () => {
        crudData.value.form.formName = "添加";
        crudData.value.form.formList = crudData.value.form.formList.map(
          (item) => {
            if (item.type == "multSelect") {
              item.value = [];
            } else {
              item.value = null;
            }
            return item;
          }
        );
        crudData.value.form.formShow = true;

        // showAdd.value = true;
      },
    },
  ],
  // sortRule 默认排序规则,排序字段prop在 clums中加上sortable
  sortRule: { prop: "value3", order: "descending" }, // prop: 'value3', order: 'descending'||'ascending'
  // data 获取数据getTableData
  data: mockData,
  // pager 分页配置
  pager: {
    total: 11,
    pageIndex: 1,
    pageSize: 10,
    pagerLang: [10, 20, 50, 100],
    sizeChange: (e) => {
      // 改变每页条数
      crudData.value.pager.pageSize = e;
      crudData.value.pager.pageIndex = 1;
      getTableData();
    },
    pageIndexChange: (e) => {
      // 改变页码
      crudData.value.pager.pageIndex = e;
      getTableData();
    },
  },
  // form 弹窗配置 可自定义或直接配置
  form: {
    formName: "添加",
    formShow: false,
    formList: [
      {
        key: "value1",
        type: "input",
        label: "变量名称",
        placeholder: "请输入变量名称",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入变量名称",
            trigger: "blur",
          },
        ],
      },
      {
        key: "valueA",
        type: "select",
        label: "功能码",
        placeholder: "请选择功能码",
        validate: [
          {
            required: true,
            message: "请选择功能码",
            trigger: "change",
          },
        ],
        optionList: [
          {
            label: "1",
            value: 0,
          },
          {
            label: "2",
            value: 1,
          },
          {
            label: "3",
            value: 2,
          },
        ],
      },
      {
        key: "valueD",
        type: "input",
        label: "起始地址",
        placeholder: "请输入起始地址",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入起始地址",
            trigger: "blur",
          },
        ],
      },
      {
        key: "valueE",
        type: "input",
        label: "数量",
        placeholder: "请输入数量",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur",
          },
        ],
      },
      {
        key: "valueB",
        type: "select",
        label: "符号类型",
        placeholder: "请选择符号类型",
        validate: [
          {
            required: true,
            message: "请选择符号类型",
            trigger: "change",
          },
        ],
        optionList: [
          {
            label: "1",
            value: 0,
          },
          {
            label: "2",
            value: 1,
          },
          {
            label: "3",
            value: 2,
          },
        ],
      },
      {
        key: "valueC",
        type: "select",
        label: "字节序",
        placeholder: "请选择字节序",
        validate: [
          {
            required: true,
            message: "请选择字节序",
            trigger: "change",
          },
        ],
        optionList: [
          {
            label: "1",
            value: 0,
          },
          {
            label: "2",
            value: 1,
          },
          {
            label: "3",
            value: 2,
          },
        ],
      },
      {
        key: "valueG",
        type: "input",
        label: "倍率",
        placeholder: "请输入倍率",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入倍率",
            trigger: "blur",
          },
        ],
      },
      {
        key: "valueH",
        type: "input",
        label: "偏移量",
        placeholder: "请输入偏移量",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入偏移量",
            trigger: "blur",
          },
        ],
      },
      {
        key: "valueF",
        type: "select",
        label: "小数位数",
        placeholder: "请选择小数位数",
        validate: [
          {
            required: true,
            message: "请选择小数位数",
            trigger: "change",
          },
        ],
        optionList: [
          {
            label: "1",
            value: 0,
          },
          {
            label: "2",
            value: 1,
          },
          {
            label: "3",
            value: 2,
          },
        ],
      },
      {
        key: "valueI",
        type: "input",
        label: "单位",
        placeholder: "请输入单位",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入单位",
            trigger: "blur",
          },
        ],
      },
    ],
    handelFormShow: (name, flag) => {
      crudData.value.form.formName = name;
      crudData.value.form.formShow = flag;
    },
    handelSubmit: (data) => {
      if (crudData.value.form.formName == "添加") {
        //添加
        console.log("添加", data);
      } else {
        //编辑
        console.log("编辑", data);
      }
      //此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
      crudData.value.form.formShow = false;
    },
  },
  //查询参数回调
  searchCb: (e) => {
    console.log("searchCb", e);
    getTableData(e);
  },
  //重置回调
  reset: (e) => {
    console.log("reset", e);
    getTableData();
  },
});

const getTableData = (e) => {
  console.log("getTableData", e);
};

onMounted(() => {
  getTableData();
});

const uploadUrl = ref("/api/alarmPush/import");
var selectTion = reactive([]);
const getSelection = (val) => {
  selectTion = val;
  console.log("选中", selectTion);
};
</script>

<style lang="scss" scoped></style>
